<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibibi</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 悬浮顶部 -->
    <header class="suspension-box">
        <div class="m-navbar">
            <a href="#" class="logo">
                <i class="iconfont Navbar_logo"></i>
            </a>
            <div class="right">
                <a href="#" class="search">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="#" class="user-head">
                    <img src="https://i0.hdslb.com/bfs/face/8f7c3ed36805d2afc3dc343334e0f13afc202e3e.jpg@48w_48h_1c.webp"
                        alt="头像">
                </a>
                <a href="#" class="download-app">
                    <img src="https://s1.hdslb.com/bfs/static/jinkela/mstation-h5/assets/navOpenApp.png" alt="下载">
                </a>
            </div>
        </div>
        <div class="channel-menu">
            <ul class="tab">
                <li><a href="#" class="current">首页</a></li>
                <li><a href="#">动画</a></li>
                <li><a href="#">番剧</a></li>
                <li><a href="#">国创</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">舞蹈</a></li>
            </ul>
            <div class="more">
                <a href="#">
                    <i class="iconfont general_pulldown_s"></i>
                </a>
            </div>
        </div>
    </header>
    <!-- 视频内容展示 -->
    <section class="video-content">
        <div class="video-list">
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
            <a href="#" class="video">
                <div class="pic">
                    <img src="images/pic1.webp" alt="随机视频">
                    <div class="count">
                        <span>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            109.7万
                        </span>
                        <span>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            1357
                        </span>
                    </div>
                </div>
                <p class="title">离谱！腾讯代理原神，改动十分良心！试玩实况</p>
            </a>
        </div>
    </section>

    <footer class="open-app">
        <div>
            <i class="iconfont Navbar_logo"></i>
            <span>打开App，看你感兴趣的视频</span>
        </div>
    </footer>
</body>

</html>